<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jar Monitor - 监控数据模拟器</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      .container {
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        padding: 40px;
        max-width: 800px;
        width: 100%;
      }

      h1 {
        text-align: center;
        color: #333;
        margin-bottom: 10px;
        font-size: 32px;
      }

      .subtitle {
        text-align: center;
        color: #666;
        margin-bottom: 40px;
        font-size: 14px;
      }

      .status-card {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        color: white;
        text-align: center;
      }

      .status-label {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 2px;
      }

      .status-value {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
        animation: pulse 2s infinite;
      }

      .status-enabled {
        background: #4ade80;
      }

      .status-disabled {
        background: #f87171;
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      .controls {
        display: flex;
        gap: 15px;
        margin-bottom: 30px;
      }

      .btn {
        flex: 1;
        padding: 18px 30px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      }

      .btn:active {
        transform: translateY(0);
      }

      .btn-enable {
        background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
        color: white;
      }

      .btn-disable {
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        color: white;
      }

      .info-section {
        background: #f8fafc;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 20px;
      }

      .info-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
      }

      .info-title::before {
        content: "📊";
        margin-right: 10px;
        font-size: 24px;
      }

      .info-list {
        list-style: none;
      }

      .info-list li {
        padding: 10px 0;
        color: #555;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
      }

      .info-list li:last-child {
        border-bottom: none;
      }

      .info-list li::before {
        content: "✓";
        color: #4ade80;
        font-weight: bold;
        margin-right: 10px;
      }

      .endpoints {
        background: #f0f9ff;
        border-radius: 12px;
        padding: 25px;
      }

      .endpoints h3 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
      }

      .endpoints h3::before {
        content: "🔗";
        margin-right: 10px;
        font-size: 24px;
      }

      .endpoint-item {
        background: white;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 10px;
        border-left: 4px solid #3b82f6;
      }

      .endpoint-item:last-child {
        margin-bottom: 0;
      }

      .endpoint-url {
        font-family: "Courier New", monospace;
        color: #3b82f6;
        font-weight: 600;
        margin-bottom: 5px;
      }

      .endpoint-desc {
        font-size: 13px;
        color: #666;
      }

      .message {
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: none;
        animation: slideIn 0.3s ease;
      }

      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .message.success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
      }

      .message.error {
        background: #fee2e2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
      }

      .loading {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>🚀 Jar Monitor</h1>
      <p class="subtitle">Prometheus指标监控 & 日志告警模拟器</p>

      <div id="message" class="message"></div>

      <div class="status-card">
        <div class="status-label">当前状态</div>
        <div class="status-value">
          <span class="status-indicator" id="statusIndicator"></span>
          <span id="statusText">加载中...</span>
        </div>
      </div>

      <div class="controls">
        <button class="btn btn-enable" onclick="enableSimulation()">
          ▶️ 启用模拟
        </button>
        <button class="btn btn-disable" onclick="disableSimulation()">
          ⏸️ 停用模拟
        </button>
      </div>

      <div class="info-section">
        <div class="info-title">模拟数据类型</div>
        <ul class="info-list">
          <li>业务指标: 订单、支付、登录成功/失败计数</li>
          <li>系统指标: 活跃用户、队列大小、数据库连接数</li>
          <li>性能指标: API响应时间、数据库查询时间</li>
          <li>异常日志: FATAL、ERROR、WARN级别告警</li>
          <li>业务日志: 交易监控、批处理、通知推送</li>
        </ul>
      </div>

      <div class="endpoints">
        <h3>监控端点</h3>
        <div class="endpoint-item">
          <div class="endpoint-url">GET /actuator/prometheus</div>
          <div class="endpoint-desc">Prometheus指标采集端点</div>
        </div>
        <div class="endpoint-item">
          <div class="endpoint-url">GET /actuator/health</div>
          <div class="endpoint-desc">应用健康检查端点</div>
        </div>
        <div class="endpoint-item">
          <div class="endpoint-url">GET /actuator/metrics</div>
          <div class="endpoint-desc">所有可用指标列表</div>
        </div>
        <div class="endpoint-item">
          <div class="endpoint-url">GET /api/simulator/status</div>
          <div class="endpoint-desc">模拟器状态查询</div>
        </div>
      </div>
    </div>

    <script>
      // 页面加载时获取状态
      window.onload = function () {
        refreshStatus();
      };

      // 刷新状态
      function refreshStatus() {
        fetch("/api/simulator/status")
          .then((response) => response.json())
          .then((data) => {
            updateStatus(data.enabled);
          })
          .catch((error) => {
            console.error("获取状态失败:", error);
            showMessage("获取状态失败", "error");
          });
      }

      // 启用模拟
      function enableSimulation() {
        fetch("/api/simulator/enable", {
          method: "POST",
        })
          .then((response) => response.json())
          .then((data) => {
            if (data.success) {
              updateStatus(true);
              showMessage("✅ " + data.message, "success");
            }
          })
          .catch((error) => {
            console.error("启用失败:", error);
            showMessage("❌ 启用失败", "error");
          });
      }

      // 停用模拟
      function disableSimulation() {
        fetch("/api/simulator/disable", {
          method: "POST",
        })
          .then((response) => response.json())
          .then((data) => {
            if (data.success) {
              updateStatus(false);
              showMessage("⏸️ " + data.message, "success");
            }
          })
          .catch((error) => {
            console.error("停用失败:", error);
            showMessage("❌ 停用失败", "error");
          });
      }

      // 更新状态显示
      function updateStatus(enabled) {
        const statusText = document.getElementById("statusText");
        const statusIndicator = document.getElementById("statusIndicator");

        if (enabled) {
          statusText.textContent = "运行中";
          statusIndicator.className = "status-indicator status-enabled";
        } else {
          statusText.textContent = "已停止";
          statusIndicator.className = "status-indicator status-disabled";
        }
      }

      // 显示消息
      function showMessage(text, type) {
        const messageDiv = document.getElementById("message");
        messageDiv.textContent = text;
        messageDiv.className = "message " + type;
        messageDiv.style.display = "block";

        setTimeout(() => {
          messageDiv.style.display = "none";
        }, 3000);
      }
    </script>
  </body>
</html>
